<template>
  <section class="f-order-sale">
    <div class="w-card my-content-box">
      <el-tabs v-model="apiName" @tab-change="resetHandle">
        <el-tab-pane label="入库记录" name="warehouseRecord">
          <div class="my-search-box">
            <div class="datebox">
              <span>操作时间：</span>
              <el-date-picker v-model="searchForm.date" type="datetimerange" value-format="x" start-placeholder="开始时间"
                end-placeholder="结束时间" @change="selectDate" />
            </div>
            <div class="f-ml-20">
              <el-button @click="searchHandle" type="primary">查询</el-button>
              <el-button @click="resetHandle">重置</el-button>
            </div>
          </div>

          <div class="my-table-box">
            <el-table :height="tableHeight" :header-cell-style="{background:'#d6dee5',color:'#000000',fontSize:'14px'}"
              :cell-style="{fontSize:'12px',color:'#7b7b7d'}" :data="tableData" stripe>
              <el-table-column type="index" width="55" label="序号" align="center" />
              <el-table-column prop="orderId" label="入库ID" align="center">
                <template v-slot="scope">
                  {{ scope.row.recordId || '' }}
                </template>
              </el-table-column>
              <el-table-column prop="totalNum" label="数据总数" align="center">
                <template v-slot="scope">
                  {{ scope.row.totalNum }}
                </template>
              </el-table-column>
              <el-table-column prop="createByUserName" label="操作人" align="center">
                <template v-slot="scope">
                  {{ scope.row.createByUserName }}
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="操作时间" align="center">
                <template v-slot="scope">
                  {{ getDateTime(scope.row.createTime)[6] || '--' }}
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="300">
                <template v-slot="scope">
                  <div class="table-handle-box">
                    <el-link style="font-size:12px" type="primary" @click="openDialog(1,scope.row)">详情</el-link>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="my-table-footer">
              <el-pagination style="margin-left:auto;" v-model:currentPage="page" v-model:page-size="size"
                :page-sizes="[10, 20, 50, 100]" small :background="true" layout="total, sizes, prev, pager, next, jumper"
                :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="调拨记录" name="transferList">
          <div class="my-search-box">
            <div class="datebox">
              <span>操作时间：</span>
              <el-date-picker v-model="searchForm.date" type="datetimerange" value-format="x" start-placeholder="开始时间"
                end-placeholder="结束时间" @change="(e) => {console.log(e)}" />
            </div>
            <div class="f-ml-20">
              <el-button @click="searchHandle" type="primary">查询</el-button>
              <el-button @click="resetHandle">重置</el-button>
            </div>
          </div>

          <div class="my-table-box">
            <el-table :height="tableHeight" :header-cell-style="{background:'#d6dee5',color:'#000000',fontSize:'14px'}"
              :cell-style="{fontSize:'12px',color:'#7b7b7d'}" :data="tableData" stripe>
              <el-table-column type="index" width="55" label="序号" align="center" />
              <el-table-column prop="orderId" label="调拨ID" align="center">
                <template v-slot="scope">
                  {{ scope.row.recordId || '' }}
                </template>
              </el-table-column>
              <el-table-column prop="total" label="数据总数" align="center">
                <template v-slot="scope">
                  {{ scope.row.total }}
                </template>
              </el-table-column>
              <el-table-column prop="modifyByUserName" label="操作人" align="center">
                <template v-slot="scope">
                  {{ scope.row.modifyByUserName }}
                </template>
              </el-table-column>
              <el-table-column prop="createTimeMill" label="操作时间" align="center">
                <template v-slot="scope">
                  {{ getDateTime(scope.row.createTimeMill)[6] || '--' }}
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="300">
                <template v-slot="scope">
                  <div class="table-handle-box">
                    <el-link style="font-size:12px" type="primary" @click="openDialog(2,scope.row)">详情</el-link>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="my-table-footer">
              <el-pagination style="margin-left:auto;" v-model:currentPage="page" v-model:page-size="size"
                :page-sizes="[10, 20, 50, 100]" small :background="true" layout="total, sizes, prev, pager, next, jumper"
                :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="退库记录" name="tuikuRecordList">
          <div class="my-search-box">
            <div class="datebox">
              <span>操作时间：</span>
              <el-date-picker v-model="searchForm.date" type="datetimerange" value-format="x" start-placeholder="开始时间"
                end-placeholder="结束时间" @change="(e) => {console.log(e)}" />
            </div>
            <div class="f-ml-20">
              <el-button @click="searchHandle" type="primary">查询</el-button>
              <el-button @click="resetHandle">重置</el-button>
            </div>
          </div>

          <div class="my-table-box">
            <el-table :height="tableHeight" :header-cell-style="{background:'#d6dee5',color:'#000000',fontSize:'14px'}"
              :cell-style="{fontSize:'12px',color:'#7b7b7d'}" :data="tableData" stripe>
              <el-table-column type="index" width="55" label="序号" align="center" />
              <el-table-column prop="orderId" label="退库ID" align="center">
                <template v-slot="scope">
                  {{ scope.row.recordId || '' }}
                </template>
              </el-table-column>
              <el-table-column prop="total" label="数据总数" align="center">
                <template v-slot="scope">
                  {{ scope.row.total }}
                </template>
              </el-table-column>
              <el-table-column prop="createByUserName" label="操作人" align="center">
                <template v-slot="scope">
                  {{ scope.row.createByUserName }}
                </template>
              </el-table-column>
              <el-table-column prop="createTimeMill" label="操作时间" align="center">
                <template v-slot="scope">
                  {{ getDateTime(scope.row.createTimeMill)[6] || '--' }}
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="300">
                <template v-slot="scope">
                  <div class="table-handle-box">
                    <el-link style="font-size:12px" type="primary" @click="openDialog(3,scope.row)">详情</el-link>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="my-table-footer">
              <el-pagination style="margin-left:auto;" v-model:currentPage="page" v-model:page-size="size"
                :page-sizes="[10, 20, 50, 100]" small :background="true" layout="total, sizes, prev, pager, next, jumper"
                :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="回拨记录" name="shouhuiRecordList">
          <div class="my-search-box">
            <div class="datebox">
              <span>操作时间：</span>
              <el-date-picker v-model="searchForm.date" type="datetimerange" value-format="x" start-placeholder="开始时间"
                end-placeholder="结束时间" @change="(e) => {console.log(e)}" />
            </div>
            <div class="f-ml-20">
              <el-button @click="searchHandle" type="primary">查询</el-button>
              <el-button @click="resetHandle">重置</el-button>
            </div>
          </div>

          <div class="my-table-box">
            <el-table :height="tableHeight" :header-cell-style="{background:'#d6dee5',color:'#000000',fontSize:'14px'}"
              :cell-style="{fontSize:'12px',color:'#7b7b7d'}" :data="tableData" stripe>
              <el-table-column type="index" width="55" label="序号" align="center" />
              <el-table-column prop="orderId" label="回拨ID" align="center">
                <template v-slot="scope">
                  {{ scope.row.recordId || '' }}
                </template>
              </el-table-column>
              <el-table-column prop="total" label="数据总数" align="center">
                <template v-slot="scope">
                  {{ scope.row.total }}
                </template>
              </el-table-column>
              <el-table-column prop="modifyByUserName" label="操作人" align="center">
                <template v-slot="scope">
                  {{ scope.row.modifyByUserName }}
                </template>
              </el-table-column>
              <el-table-column prop="createTimeMill" label="操作时间" align="center">
                <template v-slot="scope">
                  {{ getDateTime(scope.row.createTimeMill)[6] || '--' }}
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="300">
                <template v-slot="scope">
                  <div class="table-handle-box">
                    <el-link style="font-size:12px" type="primary" @click="openDialog(4,scope.row)">详情</el-link>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="my-table-footer">
              <el-pagination style="margin-left:auto;" v-model:currentPage="page" v-model:page-size="size"
                :page-sizes="[10, 20, 50, 100]" small :background="true" layout="total, sizes, prev, pager, next, jumper"
                :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

      <el-dialog v-model="dialogTableVisible" title="操作记录详情" width="1000">
        <div class="my-table-box">
          <el-table height="500" :header-cell-style="{background:'#d6dee5',color:'#000000',fontSize:'14px'}"
            :cell-style="{fontSize:'12px',color:'#7b7b7d'}" :data="dialogTable" stripe>
            <el-table-column type="index" width="55" label="序号" align="center" />
            <el-table-column prop="orderId" label="ID" align="center">
              <template v-slot="scope">
                {{ scope.row.recordId || '' }}
              </template>
            </el-table-column>
            <el-table-column prop="wareGoodsId" label="设备商品ID" align="center">
              <template v-slot="scope">
                {{ scope.row.wareGoodsId }}
              </template>
            </el-table-column>
            <el-table-column prop="deviceId" label="设备ID" align="center">
              <template v-slot="scope">
                {{ scope.row.deviceId }}
              </template>
            </el-table-column>
            <el-table-column prop="deviceNo" label="设备编号" align="center">
              <template v-slot="scope">
                {{ scope.row.deviceNo }}
              </template>
            </el-table-column>
            <el-table-column prop="equipmentType" label="型号" align="center">
              <template v-slot="scope">
                {{ scope.row.equipmentType }}
              </template>
            </el-table-column>
            <el-table-column prop="color" label="颜色" align="center">
              <template v-slot="scope">
                {{ scope.row.color }}
              </template>
            </el-table-column>
            <el-table-column prop="packageName" label="套餐" align="center">
              <template v-slot="scope">
                {{ scope.row.packageName }}
              </template>
            </el-table-column>
          </el-table>
          <div class="my-table-footer">
            <el-pagination style="margin-left:auto;" v-model:currentPage="dialogPage" v-model:page-size="dialogSize"
              :page-sizes="[10, 20, 50, 100]" small :background="true" layout="total, sizes, prev, pager, next, jumper"
              :total="dialogTotal" @current-change="handleCurrentChangeDialog" />
          </div>
        </div>
      </el-dialog>
    </div>
  </section>
</template>

<script>
import { onMounted, reactive, ref, toRefs, watch, nextTick } from 'vue'
import { getWindowWidthAndHeight, warningDeal, getDateTime, successDeal, BlobDownLoad, setStore } from '@/utils/utils'
import { useRoute, useRouter } from 'vue-router'
import api from '../api'

export default {
  setup() {
    const route = useRoute()
    const router = useRouter()

    const state = reactive({
      loading: false,
      off: {
        upload: false,
      },
      isDetail: false,
      apiName: 'warehouseRecord',

      searchForm: {
        "createTimeMax": "",
        "createTimeMin": "",
        "orderBy": "id desc",
      },

      tableHeight: 0,
      tableData: [],
      page: 1,
      size: 10,
      total: 0,

      dialogTableVisible: false,
      dialogForm: {
        "orderBy": "id desc",
        "page": 1,
        "size": 10,
        "uniqueId": ""
      },
      dialogTable: [],
      dialogType: 1,
      dialogPage: 1,
      dialogSize: 10,
      dialogTotal: 0,
    })

    function searchHandle() {
      state.page = 1
      getTableData()
    }

    function resetHandle() {
      state.searchForm = {
        "createTimeMax": "",
        "createTimeMin": "",
        "orderBy": "id desc",
      }
      searchHandle()
    }

    function getTableData() {
      const obj = {
        page: state.page,
        size: state.size,
        ...state.searchForm,
      }
      api[state.apiName](obj).then(res => {
        state.tableData = res.data.list
        state.total = res.data.total
      }).catch(err => {
        console.log(err)
      })
    }

    function handleCurrentChange(e) {
      state.page = e
      getTableData()
    }

    function handleSizeChange(e) {
      state.size = e
      getTableData()
    }

    const selectDate = (e) => {
      state.searchForm.createTimeMin = e[0]
      state.searchForm.createTimeMax = e[1]
    }

    // 导出
    const exportHandle = () => {
      const obj = {
        responseType: 'blob',
        ...state.searchForm,
      }
      api.warehouseInfoExport(obj).then(res => {
        const _fileName = decodeURIComponent(res.headers['content-disposition'].split(';')[1].split('=')[1])
        BlobDownLoad(res, _fileName)
      }).catch(err => {
        console.log(err)
      })
    }

    const openDialog = (type, data) => {
      state.dialogForm = data
      state.dialogType = type
      state.dialogPage = 1
      if (type == 1) {
        getWarehouseRecordDetail()
      } else if (type == 2) {
        getTransferDetail()
      } else if (type == 3) {
        getTuikuRecordDetail()
      } else if (type == 4) {
        getShouhuiRecordDetail()
      }
    }

    const getWarehouseRecordDetail = () => {
      state.dialogTableVisible = true

      const obj = {
        page: state.dialogPage,
        size: state.dialogSize,
        ...state.dialogForm,
        uniqueId: state.dialogForm.recordId
      }
      api.warehouseRecordDetail(obj).then(res => {
        state.dialogTable = res.data.list
        state.dialogTotal = res.data.total
      })
    }

    const getTransferDetail = () => {
      state.dialogTableVisible = true

      const obj = {
        page: state.dialogPage,
        size: state.dialogSize,
        ...state.dialogForm,
        uniqueId: state.dialogForm.recordId
      }
      api.transferDetail(obj).then(res => {
        state.dialogTable = res.data.list
        state.dialogTotal = res.data.total
      })
    }

    const getTuikuRecordDetail = () => {
      state.dialogTableVisible = true

      const obj = {
        page: state.dialogPage,
        size: state.dialogSize,
        uniqueId: state.dialogForm.recordId
      }
      api.tuikuRecordDetail(obj).then(res => {
        state.dialogTable = res.data.list
        state.dialogTotal = res.data.total
      })
    }

    const getShouhuiRecordDetail = () => {
      state.dialogTableVisible = true

      const obj = {
        page: state.dialogPage,
        size: state.dialogSize,
        ...state.dialogForm,
        uniqueId: state.dialogForm.recordId
      }
      api.shouhuiRecordDetail(obj).then(res => {
        state.dialogTable = res.data.list
        state.dialogTotal = res.data.total
      })
    }

    function handleCurrentChangeDialog(e) {
      state.dialogPage = e
      if (state.dialogType == 1) {
        getWarehouseRecordDetail()
      } else if (state.dialogType == 2) {
        getTransferDetail()
      } else if (state.dialogType == 3) {
        getTuikuRecordDetail()
      } else if (state.dialogType == 4) {
        getShouhuiRecordDetail()
      }
    }

    onMounted(() => {
      let winHeight = getWindowWidthAndHeight()
      state.tableHeight = winHeight.windowHeight - 302
      getTableData()
    })

    return {
      ...toRefs(state),
      getDateTime,
      searchHandle,
      resetHandle,
      handleCurrentChange,
      handleSizeChange,
      selectDate,
      exportHandle,
      openDialog,
      handleCurrentChangeDialog,
    }
  }
}
</script>

<style lang="scss" scoped>
.f-order-sale {
  .my-content-box {
    box-sizing: border-box;
    padding: 20px;

    > .title-box {
      display: flex;
      align-items: center;

      > .title-text {
        font-size: 16px;
        font-weight: bold;
      }
    }

    .my-search-box {
      box-sizing: border-box;
      padding: 20px 20px 20px 0;
      padding-bottom: 0;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 10px;

      > div {
        width: 300px;
        display: flex;
        align-items: center;

        > span {
          flex-shrink: 0;
          width: 90px;
          text-align: right;
        }
      }

      .datebox {
        width: 500px;
      }
    }

    .my-table-box {
      margin-top: 20px;

      .table-handle-box {
        display: flex;
        justify-content: space-around;
        align-items: center;
      }

      .my-table-footer {
        display: flex;
        align-items: center;
        margin-top: 10px;
        flex-wrap: wrap;
        gap: 10px;
      }
    }
  }
}
</style>